<template>
  <view class="container">
    <!-- 头部区域 -->
    <!-- <globalheader/> -->
    
    <!-- 医院信息卡片 -->
    <view class="hospital-card">
      <image class="hospital-image" :src="imgurl+hospital.imgUrl" mode="aspectFill"></image>
      <view class="hospital-info">
        <view class="hospital-name">
          <text>{{hospital.name}}</text>
        </view>
		<view class="rating">
		  <view class="icon-shoucang-color">
		     <text class="iconfont icon-shoucang " style="font-size: 32rpx;">5.0</text>
		  </view>
		</view>
        
        <view class="info-row">
			<view class="icon-shijian-color">
			  <text class="iconfont icon-shijian" style="font-size: 50rpx;"></text>
			</view>
          <text class="label">{{hospital.openingHours}}</text>
        </view>
        <view class="info-row">
			<view class="icon-dianhua-color">
			  <text class="iconfont icon-dianhua" style="font-size: 50rpx;"></text>
			</view>
          <text class="label">{{hospital.telephone}}</text>
        </view>
        <view class="info-row">
			<view class="icon-dingwei-color">
			  <text class="iconfont icon-dingwei" style="font-size: 50rpx;"></text>
			</view>
          <text class="label">{{hospital.address}}</text>
        </view>
      </view>
    </view>

    <!-- 医院介绍 -->
    <view class="section">
      <view class="section-title">医院简介</view>
      <!-- <view class="intro-text">
        {{hospital.snapshot}}
      </view> -->
      <view class="stats">
        <view class="stat-item">
			<text class="stat-label">建院时间</text>
          <text class="stat-value">{{hospital.yearOfEstablishment}}年</text>
        </view>
        <view class="stat-item">
			<text class="stat-label">医院等级</text>
          <text class="stat-value">{{hospital.hospitalGrade}}</text>
        </view>
        <view class="stat-item">
			<text class="stat-label">年门诊量</text>
          <text class="stat-value">{{hospital.annualOutpatientVolume}}</text>
        </view>
      </view>
    </view>

    <!-- 主要科室 -->
    <view class="section">
      <view class="section-title">主要科室</view>
      <view class="departments">
        <view class="dept-item" v-for="(dept, index) in departments" :key="index">
          <view class="dept-name">
		   <text class="">{{dept.name}}</text>
		   <view class="icon-awardjiangzhang-right"><text class="iconfont icon-awardjiangzhang"></text></view>
		  </view>
          <view class="dept-desc">{{dept.snapshot}}</view>
        </view>
      </view>
    </view>

    <!-- 知名医生 -->
    <!-- <view class="section">
      <view class="section-title">知名医生</view>
      <view class="doctors">
        <view class="doctor-card" v-for="(doctor, index) in doctors" :key="index" @tap="showDoctorDetail(doctor)">
          <image :src="imgurl+doctor.imgUrl" mode="aspectFill" class="doctor-avatar"></image>
          <view class="doctor-info">
            <text class="doctor-name">{{doctor.name}}</text>
            <text class="doctor-title">{{doctor.jobTitle}}</text>
            <text class="doctor-dept">{{doctor.departmentName}}</text>
          </view>
        </view>
      </view>
    </view> -->
	<!-- 电话&民宿&医院预约 -->
	<view class="section">
		<view class="section-title">医宿预约</view>
		<view class="stats">
		  <view class="stat-item-phone" @click="contactService">
		    <!-- <button class="contact-btn" @tap="contactService" style="height: 100rpx;">咨询电话</button> -->
			<text class="iconfont icon-dianhua" style="font-size: 32rpx;color: #FFFFFF;"></text>
			<text style="font-size: 32rpx;color: #FFFFFF;">咨询电话</text>
		  </view>
		  <view class="stat-item-minsu" @click="minsuService">
			<!-- <text style="font-size: 32rpx;color: #FFFFFF;">民宿</text> -->
			<!-- <button class="contact-btn" @tap="contactService" style="background-color: #ffaa00;height: 100rpx;">民宿预约</button> -->
			<text class="iconfont icon-minsu" style="font-size: 50rpx;color: #FFFFFF;"></text>
			<text style="font-size: 32rpx;color: #FFFFFF;">民宿预约</text>
		  </view>
		  <!-- <view class="stat-item"> -->
			<!-- <text class="stat-label">医院预约</text> -->
			<img :src="guahao" class="sidebar-logo" @click="imgClick"/>
		  <!-- </view> -->
		</view>
	</view>

    <!-- 导航按钮 -->
    <!-- <button class="nav-button" @tap="showNavigationModal">打开导航</button> -->
	<view class="sectionn">
	  <view class="section-title">位置导航</view>
	  <view class="position-navigation">
		  <button class="navigation-button" @tap="showNavigationModal">
			<text class="iconfont icon-daohang"></text>
			<text class="button-text">打开导航</text>
		  </button>
	  </view>
	  
	</view>

    <!-- 导航模态框 -->
    <uni-popup ref="navigationPopup" type="bottom">
      <view class="nav-modal">
        <view class="nav-header">
          <text class="location-text">{{hospital.address}}</text>
        </view>
        <view class="nav-options">
          <view class="nav-option" @tap="navigate('drive',hospital)">
            <text class="icon">🚗</text>
            <text>驾车</text>
          </view>
          <view class="nav-option" @tap="navigate('transit',hospital)">
            <text class="icon">🚌</text>
            <text>公交</text>
          </view>
          <view class="nav-option" @tap="navigate('walk',hospital)">
            <text class="icon">🚶</text>
            <text>步行</text>
          </view>
        </view>
      </view>
    </uni-popup>
	
	<!-- Doctor Profile Modal -->
	<uni-popup ref="doctorProfilePopup" type="center">
	  <view class="profile-modal" v-if="selectedDoctor">
	    <view class="modal-header">
	      <text class="modal-title">医生简介</text>
	      <text class="close-btn" @tap="closeDoctorProfile">×</text>
	    </view>
	    <view class="doctor-profile">
	      <image class="profile-avatar" :src="imgurl+selectedDoctor.imgUrl" mode="aspectFill"></image>
	      <view class="profile-basic-info">
	        <text class="profile-name">{{selectedDoctor.name}}</text>
	        <text class="profile-title">{{selectedDoctor.jobTitle}}</text>
	        <text class="profile-dept">{{selectedDoctor.departmentName}}</text>
	      </view>
	    </view>
	    <view class="profile-specialties">
			<view class="section-subtitle">
				<text class="iconfont icon-stethoscope-line"></text>
				<text class="">专业特长</text>
			</view>
	      <view class="specialty-tags">
	        <text class="specialty-tag" v-for="(specialty, index) in doctorSpecialty" :key="index">
	          {{specialty}}
	        </text>
	      </view>
	    </view>
	    <view class="profile-education">
		  <view class="section-subtitle">
		  	<text class="iconfont icon-xueshimao"></text>
		  	<text class="">教育背景</text>
		  </view>
	      <text class="education-text">{{selectedDoctor.education}}</text>
	    </view>
	    <view class="profile-introduction">
		  <view class="section-subtitle">
		  	<view class="icon-awardjiangzhang-color">
			<text class="iconfont icon-awardjiangzhang"></text>
			<text class="">个人简介</text>
			</view>
		  </view>
	      <text class="introduction-text">{{selectedDoctor.snapshot}}</text>
	    </view>
	  </view>
	</uni-popup>
  </view>
</template>

<script>
	import {selectDoctorByDepartmentId,getInfoDoctor} from '@/api/doctor.js'
	import {selectDepartmentByHospitalId,selectDepartmentAll} from '@/api/department.js'
	import {getInfoHospital} from '@/api/hospital.js'
	import config from '@/config.js'
	import {getAccompanyingTherapistByIsadmin} from '@/api/peizhenshi.js'
	import guahao from '@/static/img/114.png'
export default {
  data() {
    return {
		selectedDoctor: null,
		doctorSpecialty:[],
		hospital:null,
		imgurl: config.staticUrl,
      departments: [
      ],
      doctors: [
      ],
	  peizhenshiphone:[],
	  guahao: guahao,
    }
  },
  async onLoad(option){
	  var that = this;
	  console.log('detail.vue - onLoad options:', option);
	  //陪诊师管理员
	  getAccompanyingTherapistByIsadmin('1').then(res => {
	  	// console.log("isadmin",res)
	  	if (res.code == 200) {
	  		res.data.forEach(item => {
	  			that.peizhenshiphone.push(item.phone);
	  		})
	  	}
	  });
	  // console.log("that.peizhenshiphone",that.peizhenshiphone)
	  getInfoHospital(option.id).then(res =>{
	  		  if (res.code == 200) {
	  		  	that.hospital = res.data;
	  		  }
	  		  // console.log("that.hospital",that.hospital)
	  });

	  let hospitalId = option.id;

	  try {
	    console.log('detail.vue - Requesting all departments to filter by hospitalId:', hospitalId);
	    const res = await selectDepartmentAll(); // 调用获取所有科室的接口
	    if (res.code === 200 && Array.isArray(res.data)) {
	      // 在前端根据hospitalId过滤科室
	      that.departments = res.data.filter(dept => String(dept.hospitalId) === String(hospitalId));
	      console.log('detail.vue - Filtered departments for hospital:', that.departments);
	    } else {
	      console.error('获取所有科室失败:', res);
	    }
	  } catch (error) {
	    console.error('获取所有科室并过滤时出错:', error);
	  }
  },
  methods: {
    showDoctorDetail(doctor) {
	  // console.log(doctor)
	  this.selectedDoctor = doctor
	  this.doctorSpecialty = doctor.professionalExpertise.split(',')
	  this.$refs.doctorProfilePopup.open()
    },
	closeDoctorProfile() {
	  this.$refs.doctorProfilePopup.close()
	},
    showNavigationModal() {
      this.$refs.navigationPopup.open()
    },
    navigate(type,hospital) {
      const location = {
        latitude: parseFloat(hospital.lat),
        longitude: parseFloat(hospital.lng),
        name: hospital.name,
        address: hospital.address
      }
	  // const location = {
	  //   latitude: 39.9042,
	  //   longitude: 116.4074,
	  //   name: '北京协和医院',
	  //   address: '北京市东城区帅府园一号'
	  // }
      
      // 关闭弹窗
      this.$refs.navigationPopup.close()
      
      // 根据不同类型打开相应的导航
      switch(type) {
        case 'drive':
          uni.openLocation({
            latitude: location.latitude,
            longitude: location.longitude,
            name: location.name,
            address: location.address,
            success: () => {
              console.log('打开驾车导航成功')
            }
          })
          break
        case 'transit':
          uni.openLocation({
            latitude: location.latitude,
            longitude: location.longitude,
            name: location.name,
            address: location.address,
            success: () => {
              console.log('打开公交导航成功')
            }
          })
          break
        case 'walk':
          uni.openLocation({
            latitude: location.latitude,
            longitude: location.longitude,
            name: location.name,
            address: location.address,
            success: () => {
              console.log('打开步行导航成功')
            }
          })
          break
      }
    },
	contactService() {
	  this.showAndMakePhoneCall(this.peizhenshiphone);
	},
	showAndMakePhoneCall(phoneNumbers) {
		let stringPhones = phoneNumbers.map(number => number.toString());
	  uni.showActionSheet({
	    itemList: stringPhones,
	    success: (res) => {
	      if (res.tapIndex !== undefined) {
	        const selectedPhoneNumber = stringPhones[res.tapIndex];
	        this.makePhoneCall(selectedPhoneNumber);
	      }
	    },
	    fail: (err) => {
	      console.error("显示操作表失败:", err);
	    },
	  });
	},
	makePhoneCall(phoneNumber) {
	  uni.makePhoneCall({
	    phoneNumber: phoneNumber,
	    success: () => {
	      console.log(`成功拨打 ${phoneNumber}`);
	    },
	    fail: (err) => {
	      console.error(`拨打 ${phoneNumber} 失败:`, err);
	    },
	  });
	},
	imgClick() {
	      uni.previewImage({
	        current: 0,
	        urls:  [this.guahao]
	      })
	    },
	minsuService(){
		uni.navigateTo({
		  url: `/pages/homestay/homestaymap?hospitalName=${this.hospital.name}&hospitalLat=${this.hospital.lat}&hospitalLng=${this.hospital.lng}&distance=${this.hospital.distance}`
		})
	}
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #ffffff;
}

.header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hospital-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.hospital-image {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
}

.hospital-info {
  padding: 20rpx 0;
}

.hospital-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
}

.rating {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.star {
  color: #ffd700;
  margin-right: 8rpx;
}

.info-row {
  font-size: 28rpx;
  color: #666;
  margin-top: 12rpx;
  display: flex;
}

.section {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin: 0rpx 0rpx 32rpx;
}

.intro-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}

.stat-item {
  text-align: center;
  display: flex; /* 使用flex布局 */
  flex-direction: column;
  padding: 16rpx 40rpx;
  background-color: #eff6ff;
  border-radius: 20rpx;
}

.stat-item-phone {
  text-align: center;
  display: flex; /* 使用flex布局 */
  flex-direction: column;
  padding: 19rpx 27rpx;
  background-color: #4f66ff;
  border-radius: 20rpx;
  height: 90rpx;
}

.stat-item-minsu {
  text-align: center;
  display: flex; /* 使用flex布局 */
  flex-direction: column;
  padding: 19rpx 27rpx;
  background-color: #ffaa00;
  border-radius: 20rpx;
  height: 90rpx;
}

.stat-value {
  font-size: 32rpx;
  color: #007AFF;
  font-weight: bold;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
  margin-top: 8rpx;
}

.departments {
  margin-top: 20rpx;
}

.dept-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.dept-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.dept-desc {
  font-size: 26rpx;
  color: #666;
}

.doctors {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.doctor-card {
  width: calc(50% - 10rpx);
  background: #fff;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
}

.doctor-avatar {
  width: 100%;
  height: 400rpx;
}

.doctor-info {
  padding: 16rpx;
  display: flex; /* 使用flex布局 */
  flex-direction: column;
}

.doctor-name {
  font-size: 28rpx;
  font-weight: bold;
}

.doctor-title {
  font-size: 24rpx;
  color: #666;
  margin-top: 4rpx;
}

.doctor-dept {
  font-size: 24rpx;
  color: #007AFF;
  margin-top: 4rpx;
}

.nav-modal {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 30rpx;
}

.nav-header {
  text-align: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.location-text {
  font-size: 28rpx;
  color: #333;
}

.nav-options {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 0;
}

.nav-option {
  text-align: center;
}

.nav-option .icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}

.nav-option text {
  display: block;
  font-size: 28rpx;
  color: #333;
}

.icon-shoucang-color {
  color: #EAB308;
}

.icon-dianhua-color {
  color: #3b82f6;
}

.icon-dingwei-color {
  color: #3b82f6;
}

.icon-shijian-color {
  color: #3b82f6;
}

.icon-awardjiangzhang-color {
  color: #3b82f6;
  display: flex;
  justify-content: start;
}
.icon-awardjiangzhang-right {
  color: #3b82f6;
  float: right;
}
.icon-stethoscope-line {
  color: #3b82f6;
}

/*导航按钮样式*/
.nav-button {
  position: fixed;
  bottom: 40rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  background: #007AFF;
  color: #eff6ff;
  border-radius: 45rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
}
.position-navigation {
  /* margin: 1em; */
  padding: 48rpx;
  background-color: #eff6ff;
  border-radius: 35rpx;
}

.navigation-button {
  width: 90%;
  height: 100rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 30rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 医生详情 */
.profile-specialties-name{
	display: flex;
	flex-direction: column;
}
.profile-modal {
  background: #fff;
  width: 90vw;
  border-radius: 20rpx;
  padding: 30rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
}

.doctor-profile {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.profile-avatar {
  width: 120rpx;
  height: 150rpx;
  border-radius: 10rpx;
}

.profile-basic-info {
  display: flex;
  flex-direction: column;
}

.profile-name {
  font-size: 32rpx;
  font-weight: bold;
}

.profile-title, .profile-dept {
  font-size: 28rpx;
  color: #666;
}

.section-subtitle {
  font-size: 28rpx;
  color: #007AFF;
  margin-bottom: 15rpx;
  display: block;
}

.specialty-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 30rpx;
}

.specialty-tag {
  background: #eff6ff;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #007AFF;
}

.education-text, .introduction-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

/*陪诊电话*/
.contact-btn {
  background-color: #4B7BFF;
  color: #FFFFFF;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  border: none;
  margin: 4rpx 2rpx; /* 按钮外边距 */
}

.sidebar-logo {
  width: 150rpx;
  height: 150rpx;
}
</style>